<template>
    <div class="container">
        <div class="search">
            <t-input autofocus clearable size="large" status="success" placeholder="请输入问题" />
        </div>
        <div class="content">
            <div class="qa">
                <t-tabs :default-value="1" placement="left">
                    <t-tab-panel :value="1" label="默认">
                        <div class="question" v-for="qa in qa_list" @click="handleCurrentQA(qa)">
                            <div class="question-title">
                                <t-typography-title level="h3">{{ qa.question
                                    }}</t-typography-title>
                            </div>
                            <t-chat-content role="assistant" :content="qa.answer" variant="base"> </t-chat-content>
                            <div class="infomation">
                                <div class="time">
                                    创建时间：<div class="create-at">{{ qa.create_at }}</div>
                                    更新时间：<div class="update-at">{{ qa.update_at }}</div>
                                </div>
                                <div class=" tag">
                                    <t-tag v-for="tag in qa.tag">{{ tag }}</t-tag>
                                </div>
                            </div>
                        </div>
                    </t-tab-panel>
                    <t-tab-panel :value="2" label="最新">
                        <div class="question" v-for="qa in qa_list" @click="handleCurrentQA(qa)">
                            <div class="question-title">
                                <t-typography-title level="h3">{{ qa.question
                                    }}</t-typography-title>
                            </div>
                            <t-chat-content role="assistant" :content="qa.answer" variant="base"> </t-chat-content>
                            <div class="infomation">
                                <div class="time">
                                    创建时间：<div class="create-at">{{ qa.create_at }}</div>
                                    更新时间：<div class="update-at">{{ qa.update_at }}</div>
                                </div>
                                <div class=" tag">
                                    <t-tag v-for="tag in qa.tag">{{ tag }}</t-tag>
                                </div>
                            </div>
                        </div>
                    </t-tab-panel>
                    <t-tab-panel :value="3" label="漫游">
                        <div class="question" v-for="qa in qa_list" @click="handleCurrentQA(qa)">
                            <div class="question-title">
                                <t-typography-title level="h3">{{ qa.question
                                    }}</t-typography-title>
                            </div>
                            <t-chat-content role="assistant" :content="qa.answer" variant="base"> </t-chat-content>
                            <div class="infomation">
                                <div class="time">
                                    创建时间：<div class="create-at">{{ qa.create_at }}</div>
                                    更新时间：<div class="update-at">{{ qa.update_at }}</div>
                                </div>
                                <div class=" tag">
                                    <t-tag v-for="tag in qa.tag">{{ tag }}</t-tag>
                                </div>
                            </div>
                        </div>
                    </t-tab-panel>
                    <t-tab-panel :value="4" label="预览">
                        <div class="question">
                            <div class="question-title">
                                <t-typography-title level="h3">{{ current_qa.question
                                    }}</t-typography-title>
                            </div>
                            <t-chat-content role="assistant" :content="current_qa.answer" variant="base">
                            </t-chat-content>
                            <div class="infomation">
                                <div class="time">
                                    创建时间：<div class="create-at">无</div>
                                    更新时间：<div class="update-at">无</div>
                                </div>
                                <div class=" tag">
                                    <t-tag v-for="tag in current_qa.tag">{{ tag }}</t-tag>
                                </div>
                            </div>
                        </div>
                    </t-tab-panel>
                </t-tabs>
            </div>
            <div class="input">

                <div class="question qa-input">
                    <t-input clearable status="success" placeholder="请输入问题" v-model="current_qa.question" />
                </div>
                <div class="answer qa-input">
                    <t-textarea :autosize="{ minRows: 3, maxRows: 40 }" clearable status="success"
                        v-model="current_qa.answer" placeholder="请输入答案" />
                </div>
                <div class="tag qa-input"><t-tagInput excessTagsDisplayType="break-line" size="small" status="success"
                        v-model="current_qa.tag" /></div>
                <div class="submit">
                    <t-button>提交</t-button>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang='ts'>
import { ref, reactive } from 'vue';
const current_qa = reactive({
    question: '你好吗',
    answer: '你好，我是机器人',
    tag: ['问题', '回答']
})

const qa_list = ref([
    {
        question: '你好吗',
        answer: '### 你好，我是机器人\n你好，我是机器人 \n\n 这里有一些问题，但是不知道怎么解决\n - sadhj \n- sad',
        tag: ['问题', '回答'],
        create_at: '2023-01-01',
        update_at: '2023-01-01',
        id: 1
    },
    {
        question: '你好',
        answer: '你好，我是机器人1',
        tag: ['问题', '回答'],
        create_at: '2023-01-01',
        update_at: '2023-01-01',
        id: 2
    },
    {
        question: '你好',
        answer: '你好，我是机器人2',
        tag: ['问题', '回答'],
        create_at: '2023-01-01',
        update_at: '2023-01-01',
        id: 3,
    },
    {
        question: '你好',
        answer: '你好，我是机器人3',
        tag: ['问题', '回答'],
        create_at: '2023-01-01',
        update_at: '2023-01-01',
        id: 4,
    },
])

const handleCurrentQA = (qa: any) => {
    current_qa.question = qa.question
    current_qa.answer = qa.answer
    current_qa.tag = qa.tag
}
</script>
<style lang='scss' scoped>
.container {
    width: 70%;
    margin: 0 auto;
}

.content {
    width: 100%;
    height: 100%;
    margin-top: 10px;
    display: inline-flex;
    justify-content: space-between;

    .qa {
        width: 90%;


        .question {
            margin: 0 5px 5px 5px;
            padding: 5px;
            background-color: rgb(178, 184, 184);
            border-radius: 5px;
        }

        .infomation {
            display: flex;
            justify-content: space-between;

            .time {
                display: flex;
                gap: 5px;
                color: gray;

            }

            .tag {
                display: flex;
                gap: 5px;
            }
        }
    }

    .input {
        width: 30%;
        display: block;
        justify-content: flex-end;

        .qa-input {
            width: 100%;
            margin-bottom: 5px;
        }
    }
}
</style>
